إتقان CSS Flexbox: المحاذاة والتوزيع المتقدمين

لسنوات عديدة، كان CSS Flexbox حجر الزاوية في تصميم الويب الحديث. يشعر معظم المطورين بالراحة في استخدام display: flex لمحاذاة العناصر في صف أو إنشاء مكونات بسيطة متمركزة. ومع ذلك، يكمن الإتقان الحقيقي لـ Flexbox في فهم خصائصه الأكثر دقة للمحاذاة المتقدمة والتوزيع الديناميكي. عندما تتجاوز أساسيات justify-content: center و align-items: center، فإنك تطلق العنان لقوة إنشاء تخطيطات معقدة ومتجاوبة ومرنة جوهريًا بسهولة مدهشة.

هذا الدليل مخصص للمطورين الذين يعرفون الأساسيات ولكنهم يريدون تعميق فهمهم. سوف نستكشف الخصائص التي تتحكم في محاذاة متعددة الأسطر، والمنطق المتطور وراء كيفية نمو عناصر flex وتقلصها، والعديد من الأنماط القوية التي تحل تحديات التخطيط الشائعة. استعد للانتقال من مستخدم عادي إلى مهندس Flexbox واثق.

الأساس: تحديث سريع للمحاور الرئيسية والمتقاطعة

قبل الغوص في الموضوعات المتقدمة، من الضروري أن يكون لديك فهم قوي للمحورين اللذين يحكمان كل حاوية flex. تعمل جميع خصائص المحاذاة والتوزيع في Flexbox على طول أحد هذين المحورين.

• المحور الرئيسي: هذا هو المحور الأساسي الذي يتم من خلاله وضع عناصر flex. يتم تحديد اتجاهه بواسطة خاصية flex-direction.
• المحور المتقاطع: هذا المحور عمودي دائمًا على المحور الرئيسي.

الخلاصة الرئيسية هي أن هذه المحاور ليست ثابتة. إنها تعيد توجيه نفسها بناءً على قيمة flex-direction الخاصة بك:

• flex-direction: row (افتراضي): المحور الرئيسي أفقي (من اليسار إلى اليمين)، والمحور المتقاطع عمودي (من أعلى إلى أسفل).
• flex-direction: column: يصبح المحور الرئيسي عموديًا (من أعلى إلى أسفل)، ويصبح المحور المتقاطع أفقيًا (من اليسار إلى اليمين).
• flex-direction: row-reverse: المحور الرئيسي أفقي ولكنه يعمل من اليمين إلى اليسار.
• flex-direction: column-reverse: المحور الرئيسي عمودي ولكنه يعمل من أسفل إلى أعلى.

إن نسيان هذا المفهوم الأساسي هو مصدر معظم الارتباك في Flexbox. اسأل نفسك دائمًا: "في أي اتجاه يشير محوري الرئيسي؟" قبل تطبيق خاصية المحاذاة.

إتقان توزيع المحور الرئيسي باستخدام justify-content

تتحكم خاصية justify-content في كيفية توزيع المسافة بين عناصر flex وحولها على طول المحور الرئيسي. في حين أن flex-start و flex-end و center واضحة ومباشرة، إلا أن القوة الحقيقية تكمن في قيم توزيع المسافة.

نظرة أعمق على توزيع المساحة

دعنا نوضح الاختلافات الدقيقة ولكن الحاسمة بين space-between و space-around و space-evenly.

• justify-content: space-between;

  تقوم هذه القيمة بتوزيع العناصر بالتساوي على المحور الرئيسي. يتم دفع العنصر الأول إلى بداية الحاوية، ويتم دفع العنصر الأخير إلى نهاية الحاوية. يتم تقسيم كل المساحة المتبقية بالتساوي بين العناصر. لا توجد مساحة على الحواف الخارجية.

  حالة الاستخدام: مثالية لأشرطة التنقل حيث تريد الشعار على أقصى اليسار والروابط على أقصى اليمين، مع تباعد متساوٍ بين الروابط.

• justify-content: space-around;

  توزع هذه القيمة العناصر بمسافة متساوية حول كل عنصر. فكر في كل عنصر لديه "فقاعة" من الفضاء على جانبيه الأيسر والأيمن. عندما تلتقي فقاعات العناصر المتجاورة، تظهر المسافة بينها ضعف المسافة الموجودة على حواف الحاوية. على وجه التحديد، تكون المسافة الموجودة على الحواف الخارجية نصف حجم المسافة بين العناصر.

  حالة الاستخدام: مفيدة لتخطيطات البطاقات أو المعارض حيث تريد أن يكون للعناصر بعض المساحة للتنفس من حواف الحاوية، ولكن لا تكون متدفقة عليها.

• justify-content: space-evenly;

  هذا هو الأكثر سهولة من بين الثلاثة. فهو يضمن أن المسافة بين أي عنصرين هي بالضبط نفس المسافة بين العنصر الأول/الأخير وحافة الحاوية. كل فجوة متطابقة.

  حالة الاستخدام: مثالي عندما تحتاج إلى تخطيط متوازن ومتماثل تمامًا. غالبًا ما يكون هذا ما يريده المصممون ضمنيًا عندما يطلبون "تباعدًا متساويًا".

السيطرة على محاذاة المحور المتقاطع باستخدام align-items و align-self

بينما تتعامل justify-content مع المحور الرئيسي، تدير align-items المحاذاة الافتراضية للعناصر على طول المحور المتقاطع داخل سطر واحد.

فهم قيم `align-items`

• align-items: stretch; (افتراضي): هذا هو السبب في أن عناصر flex الخاصة بك غالبًا ما تبدو وكأنها تملأ ارتفاع الحاوية الخاصة بها دون أن تطلب منها ذلك. ستمتد العناصر لملء حجم الحاوية على طول المحور المتقاطع (على سبيل المثال، الارتفاع في حاوية `flex-direction: row`).
• align-items: flex-start;: يتم تجميع العناصر في بداية المحور المتقاطع.
• align-items: flex-end;: يتم تجميع العناصر في نهاية المحور المتقاطع.
• align-items: center;: يتم توسيط العناصر على طول المحور المتقاطع.
• align-items: baseline;: هذه قيمة قوية وغير مستخدمة. تتم محاذاة العناصر بحيث تتماشى خطوط الأساس النصية الخاصة بها. هذا مفيد للغاية عندما يكون لديك عناصر بأحجام خطوط مختلفة (على سبيل المثال، عنوان رئيسي بجوار عنوان فرعي) وتريد محاذاتها نصيًا، وليس فقط بحدود الصندوق الخاص بها.

تجاوز مع align-self

ماذا لو كنت تريد أن يتصرف عنصر معين بشكل مختلف عن الآخرين؟ هذا هو المكان الذي تأتي فيه align-self. عند تطبيقه على عنصر flex فردي، فإنه يتجاوز خاصية align-items الخاصة بالحاوية لهذا العنصر فقط. يقبل جميع القيم نفسها مثل align-items (بالإضافة إلى `auto`، مما يعيد تعيينه إلى قيمة الحاوية).

مثال: تخيل صفًا من البطاقات، وكلها متمركزة باستخدام align-items: center. يمكنك جعل بطاقة "مميزة" تبرز عن طريق تطبيق align-self: stretch; عليها، مما يجعلها أطول من غيرها.

البطل المجهول: التوزيع المتقدم مع align-content

يمكن القول أن هذه هي الخاصية الأكثر سوء فهمًا في Flexbox، وإتقانها هو علامة على الكفاءة المتقدمة. نقطة شائعة للارتباك هي تشابهها مع align-items.

إليك القاعدة الحاسمة: ليس لـ align-content أي تأثير عندما تكون عناصر flex الخاصة بك كلها على سطر واحد. إنه يعمل فقط عندما يكون لديك حاوية flex متعددة الأسطر (أي أنك قمت بتعيين flex-wrap: wrap; وقد تم بالفعل التفاف العناصر على أسطر جديدة).

فكر في الأمر بهذه الطريقة:

• تقوم align-items بمحاذاة العناصر داخل خطها.
• تقوم align-content بمحاذاة الخطوط نفسها داخل الحاوية. إنه يتحكم في توزيع المسافة في المحور المتقاطع بين صفوف العناصر.

إنه يعمل بشكل أساسي مثل justify-content، ولكن للمحور المتقاطع. قيمه متطابقة تقريبًا:

• align-content: flex-start; (افتراضي): يتم تجميع جميع الخطوط في بداية الحاوية.
• align-content: flex-end;: يتم تجميع جميع الخطوط في النهاية.
• align-content: center;: يتم تجميع جميع الخطوط في المنتصف.
• align-content: space-between;: الخط الأول في البداية، والخط الأخير في النهاية، ويتم توزيع المسافة بالتساوي بين الخطوط.
• align-content: space-around;: يتم وضع مساحة متساوية حول كل سطر.
• align-content: space-evenly;: التباعد بين كل سطر متطابق.
• align-content: stretch;: تمتد الخطوط لتشغل المساحة المتبقية.

حالة الاستخدام: تخيل معرض صور حيث يتم التفاف العناصر. إذا كانت الحاوية ذات ارتفاع ثابت، فقد تكون هناك مساحة عمودية إضافية متبقية. بشكل افتراضي، تظهر هذه المساحة في الأسفل. باستخدام align-content: space-between; أو align-content: center;، يمكنك التحكم في التوزيع الرأسي لشبكة الصور بأكملها، مما يخلق تخطيطًا أكثر احترافية.

التحجيم والتوزيع الديناميكي: الاختزال flex

التخطيطات الثابتة نادرة. تأتي القوة الحقيقية لـ Flexbox من قدرتها على التعامل مع المحتوى الديناميكي والمساحة المتاحة. يتم التحكم في ذلك بثلاث خصائص، غالبًا ما يتم تعيينها عبر الاختزال flex: flex-grow و flex-shrink و flex-basis.

1. flex-basis: نقطة البداية

قبل حدوث أي نمو أو انكماش، يحتاج Flexbox إلى حجم بداية لكل عنصر. هذه هي مهمة flex-basis. يحدد الحجم الافتراضي للعنصر على طول المحور الرئيسي.

• إذا تم تعيينه على طول معين (على سبيل المثال، 200px أو 10rem)، فسيصبح هذا هو الحجم الأولي للعنصر.
• إذا تم تعيينه على auto، فإنه يبحث عن خاصية `width` أو `height` في العنصر. إذا لم يكن هناك أي منها، فإنه يحدد الحجم بناءً على محتوى العنصر.
• إذا تم تعيينه على 0، فلن يكون للعنصر حجم بداية ويتم تحديد حجمه النهائي بشكل خالص من خلال نسبة `flex-grow` الخاصة به.

أفضل الممارسات: غالبًا ما يكون من الأفضل استخدام flex-basis بدلاً من `width` في سياق flex، لأنه أكثر وضوحًا بشأن تحديد حجم العنصر في سياق المحور الرئيسي.

2. flex-grow: استهلاك المساحة الإيجابية

عندما يكون لدى حاوية flex مساحة إضافية على طول محورها الرئيسي، تحدد flex-grow كيفية توزيع هذه المساحة. إنها نسبة بدون وحدة.

• القيمة الافتراضية هي 0، مما يعني أن العناصر لن تنمو لملء مساحة إضافية.
• إذا كانت جميع العناصر تحتوي على flex-grow: 1، فسيتم توزيع المساحة الإضافية بالتساوي بينها.
• إذا كان أحد العناصر يحتوي على flex-grow: 2 وكان لدى عنصر آخر flex-grow: 1، فسيتلقى العنصر الأول ضعف المساحة الإضافية التي يتلقاها العنصر الثاني.

3. flex-shrink: التعامل مع المساحة السلبية (التدفق الزائد)

هذا هو النظير لـ `flex-grow`. عندما لا تكون هناك مساحة كافية في الحاوية لتناسب جميع العناصر في `flex-basis` الخاص بها، فإنها تحتاج إلى الانكماش. تتحكم flex-shrink في مقدار انكماشها.

• القيمة الافتراضية هي 1، مما يعني أن جميع العناصر تنكمش بشكل متناسب افتراضيًا لمنع التدفق الزائد.
• إذا قمت بتعيين flex-shrink: 0 على عنصر ما، فلن ينكمش. سيحافظ على حجم `flex-basis` الخاص به، مما قد يتسبب في تجاوز الحاوية. هذا مفيد لعناصر مثل الشعارات أو الأزرار التي لا ينبغي ضغطها أبدًا.

الاختزال flex: تجميع كل شيء معًا

خاصية flex هي اختزال لـ flex-grow و flex-shrink و flex-basis، بهذا الترتيب.

• flex: 0 1 auto; (الافتراضي): لا يمكن للعنصر أن ينمو، ويمكن أن ينكمش، ويتم تحديد أساسه من خلال عرضه/ارتفاعه أو محتواه.
• flex: 1; (اختزال لـ flex: 1 1 0;): قيمة شائعة جدًا. يمكن للعنصر أن ينمو وينكمش، وحجم البداية الخاص به هو 0. هذا يجعل العناصر تشترك بشكل فعال في المساحة بناءً على نسبة flex-grow الخاصة بها فقط.
• flex: auto; (اختزال لـ flex: 1 1 auto;): يمكن للعنصر أن ينمو وينكمش، ويتم تحديد أساسه من خلال محتواه. يسمح هذا للعناصر بأن يتم تحديد حجمها بشكل مختلف بناءً على محتواها، ولكنها لا تزال تمتص المساحة الإضافية بمرونة.
• flex: none; (اختزال لـ flex: 0 0 auto;): العنصر غير مرن تمامًا. لا يمكن أن ينمو أو ينكمش.

حالات الاستخدام العملية والسيناريوهات المتقدمة

السيناريو 1: التذييل الثابت (تخطيط الكأس المقدسة)

مشكلة كلاسيكية في تصميم الويب: كيفية جعل التذييل يلتصق بأسفل الصفحة، حتى عندما يكون المحتوى قصيرًا، ولكنه يندفع للأسفل بشكل طبيعي عندما يكون المحتوى طويلاً.

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Viewport Height */
}

.main-content {
  flex-grow: 1; /* or flex: 1; */
}

من خلال جعل حاوية الصفحة الرئيسية عبارة عن flexbox يعتمد على الأعمدة وتعيين منطقة المحتوى الرئيسية على flex-grow: 1، فإننا نخبرها باستهلاك كل المساحة الرأسية المتاحة، ودفع التذييل إلى أسفل منفذ العرض.

السيناريو 2: الهوامش التلقائية لتقسيم المجموعات

كيف يمكنك إنشاء شريط تنقل بشعار على أقصى اليسار ومجموعة من الروابط على أقصى اليمين؟ بينما يعمل justify-content: space-between إذا كان الشعار عنصر flex واحد، فماذا لو كان لديك عناصر متعددة على اليمين؟

الحل هو سحر الهوامش التلقائية في Flexbox.

.navbar {
  display: flex;
}

.logo {
  /* No special properties needed */
}

.nav-links {
  margin-left: auto;
}

في حاوية flex، سيستهلك الهامش التلقائي بشراهة كل المساحة المتاحة في الاتجاه الذي يتم تطبيقه فيه. من خلال تعيين margin-left: auto على مجموعة روابط التنقل، فإنه ينشئ مساحة فارغة ومرنة بين الشعار والروابط، ويدفع الروابط على طول الطريق إلى اليمين.

السيناريو 3: كائن الوسائط

يتميز نمط واجهة المستخدم الشائع بصورة أو رمز على أحد الجانبين ونص وصفي على الجانب الآخر. يجب أن يشغل النص كل المساحة المتبقية ويلتف بشكل جيد.

.media-object {
  display: flex;
  align-items: flex-start; /* Aligns image and text to the top */
}

.media-image {
  margin-right: 1rem;
  flex-shrink: 0; /* Prevents the image from being squished */
}

.media-body {
  flex-grow: 1; /* Takes up all remaining horizontal space */
}

هنا، flex-grow: 1 على حاوية النص هو المفتاح. إنه يضمن أنه بغض النظر عن مدى عرض الصورة، سيتوسع نص النص لملء بقية العرض المتاح في الحاوية.

الخلاصة: ما وراء المحاذاة، نحو التخطيط المتعمد

إن إتقان Flexbox يعني تجاوز مجرد توسيط الأشياء. يتعلق الأمر بفهم التفاعل بين المحاور ومنطق توزيع المساحة ومرونة تحديد حجم العناصر. من خلال اكتساب فهم راسخ لـ align-content للتخطيطات متعددة الأسطر، والاختزال flex للتحجيم الديناميكي، والأنماط القوية مثل الهوامش التلقائية، يمكنك إنشاء تخطيطات ليست جذابة بصريًا فحسب، بل أيضًا قوية ومتجاوبة ونظيفة من الناحية الدلالية.

في المرة القادمة التي تواجه فيها تحديًا معقدًا في التخطيط، قاوم الرغبة في الوصول إلى عوامات أو اختراقات تحديد المواقع المعقدة. بدلاً من ذلك، اسأل نفسك: هل يمكن حل هذا من خلال التوزيع المتعمد للمساحة؟ ستوجد الإجابة، في أغلب الأحيان، في الإمكانات المتقدمة لـ CSS Flexbox.